<template>
  <Dialog v-model="dialogVisible" :title="'采样方案设置'" destroy-on-close width="1300px">
    <div class="sampling-plan-dialog">
      <div v-if="tempData.hazards.length" class="hazard-list">
        <div v-for="hazard in tempData.hazards" :key="hazard.id" class="hazard-item">
          <div class="hazard-header">
            <el-tag :class="`hazard-type-${hazard.type}`" round>
              {{ hazard.cnName }}
            </el-tag>
            <el-button
              class="apply-all-btn"
              link
              size="small"
              type="primary"
              @click="applyToAll(hazard)"
            >
              应用到全部
            </el-button>
          </div>
          <div class="hazard-content">
            <el-form :model="hazard.sampling" class="sampling-form" label-width="100px">
              <!-- 第一行:数字输入框 -->
              <el-row :gutter="10" class="sampling-row">
                <el-col :span="4">
                  <el-form-item class="compact-form-item" label="采样天数">
                    <el-input-number
                      v-model="hazard.sampling.sampleDays"
                      :min="1"
                      :precision="0"
                      class="mini-input"
                      controls
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item class="compact-form-item" label="点位数量">
                    <el-input-number
                      v-model="hazard.sampling.pointCount"
                      :min="1"
                      :precision="0"
                      class="mini-input"
                      controls
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item class="compact-form-item" label="每天次数">
                    <el-input-number
                      v-model="hazard.sampling.sampleCount"
                      :min="1"
                      :precision="0"
                      class="mini-input"
                      controls
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item class="compact-form-item" label="接触时间">
                    <el-input-number
                      v-model="hazard.sampling.contactHours"
                      :max="24"
                      :min="0"
                      :precision="1"
                      class="mini-input"
                      controls
                      @change="handleSamplingContactHoursChange(hazard)"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item class="compact-form-item" label="开始天数">
                    <el-input-number
                      v-model="hazard.sampling.startDay"
                      :min="1"
                      :precision="0"
                      class="mini-input"
                      controls
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <!-- 第二行:单选按钮组 -->
              <el-row :gutter="10" class="sampling-row radio-row">
                <el-col :span="2" />
                <el-col :span="10">
                  <el-form-item class="compact-form-item" label="采样类型">
                    <el-radio-group
                      v-model="hazard.sampling.sampleType"
                      size="small"
                      @change="handleSampleTypeChange(hazard.sampling)"
                    >
                      <el-radio :value="'fix'">定点</el-radio>
                      <el-radio :value="'personal'">个体</el-radio>
                      <el-radio :value="'none'">无</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item class="compact-form-item" label="长短时间">
                    <el-radio-group
                      v-model="hazard.sampling.timeType"
                      :disabled="hazard.sampling.sampleType === 'personal'"
                      size="small"
                    >
                      <el-radio :value="'long'">长时间</el-radio>
                      <el-radio
                        :disabled="hazard.sampling.sampleType === 'personal'"
                        :value="'short'"
                        >短时间</el-radio
                      >
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
      <div v-else class="no-hazard">该岗位暂未识别危害因素，请先进行危害识别</div>
    </div>
    <template #footer>
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import Dialog from '@/components/Dialog/src/Dialog.vue'
import { cloneDeep } from 'lodash-es'

// 定义组件的props
const props = defineProps<{
  modelValue: boolean
  currentRow: any
}>()

// 修改 emit 定义，添加 update 事件
const emit = defineEmits(['update:modelValue', 'save', 'update'])

// 计算属性获取弹窗显示状态
const dialogVisible = ref(props.modelValue)

// 用于存储临时数据
const tempData = reactive({
  hazards: [] as any[]
})

// 监听弹窗显示状态变化
watch(
  () => props.modelValue,
  (val) => {
    dialogVisible.value = val
    if (val && props.currentRow?.hazards) {
      // 打开弹窗时,深拷贝数据用于临时编辑
      tempData.hazards = cloneDeep(props.currentRow.hazards)
    }
  }
)

watch(
  () => dialogVisible.value,
  (val) => {
    emit('update:modelValue', val)
  }
)

// 处理采样接触时间变化
const handleSamplingContactHoursChange = (hazard: any) => {
  if (hazard.sampling) {
    hazard.sampling.isCustomTime = true
  }
}

// 处理采样类型变化
const handleSampleTypeChange = (sampling: { sampleType: string; timeType: 'long' | 'short' }) => {
  if (sampling.sampleType === 'personal') {
    sampling.timeType = 'long'
  }
}

// 应用到全部危害
const applyToAll = (hazard: any) => {
  if (!tempData.hazards || !hazard.sampling) return

  const sourceSampling = hazard.sampling

  tempData.hazards.forEach((targetHazard: any) => {
    if (targetHazard.id !== hazard.id) {
      targetHazard.sampling = {
        ...cloneDeep(sourceSampling),
        isCustomTime: true
      }
    }
  })

  ElMessage.success('已应用到全部危害')
}

// 取消按钮
const handleCancel = () => {
  dialogVisible.value = false
}

// 确认按钮
const handleConfirm = () => {
  console.log('=== 采样方案弹窗确认 ===')
  console.log('当前临时数据:', tempData.hazards)

  // 不直接修改 props，而是通过 emit 发送更新事件
  const updatedHazards = cloneDeep(tempData.hazards)
  console.log('准备发送的更新数据:', updatedHazards)

  emit('update', updatedHazards)
  emit('save')

  dialogVisible.value = false
  console.log('=== 采样方案弹窗确认完成 ===')
}
</script>

<style lang="scss" scoped>
.sampling-plan-dialog {
  .hazard-list {
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px;
  }

  .hazard-item {
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 4px;
    margin-bottom: 8px;
    background-color: var(--el-fill-color-blank);

    .hazard-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 12px;
      border-bottom: 1px solid var(--el-border-color-lighter);
      background-color: var(--el-fill-color-light);
    }

    .hazard-content {
      padding: 12px;
    }
  }

  .sampling-form {
    :deep(.el-form-item) {
      margin-bottom: 0;
    }
  }

  .sampling-row {
    display: flex;
    align-items: center;

    &.radio-row {
      margin-top: 12px;
    }
  }

  .compact-form-item {
    :deep(.el-form-item__label) {
      font-size: 13px;
      padding-right: 8px;
      line-height: 32px;
    }

    :deep(.el-form-item__content) {
      line-height: 32px;
    }

    :deep(.el-input-number) {
      width: 100%;

      .el-input-number__decrease,
      .el-input-number__increase {
        position: absolute;
        z-index: 1;
        top: 1px;
        width: 20px;
        height: calc(100% - 2px);
        background: var(--el-fill-color-light);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .el-input-number__decrease {
        left: 1px;
        border-radius: 4px 0 0 4px;
        border-right: 1px solid var(--el-border-color);
      }

      .el-input-number__increase {
        right: 1px;
        border-radius: 0 4px 4px 0;
        border-left: 1px solid var(--el-border-color);
      }

      .el-input__wrapper {
        padding: 0 24px;
      }

      .el-input__inner {
        text-align: center;
      }
    }
  }

  .no-hazard {
    text-align: center;
    padding: 40px;
    color: var(--el-text-color-secondary);
  }
}

// 危害标签样式
:deep(.el-tag) {
  &.hazard-type-1 {
    color: #409eff;
    background-color: #ecf5ff;
    border-color: #d9ecff;
  }

  &.hazard-type-2 {
    color: #67c23a;
    background-color: #f0f9eb;
    border-color: #e1f3d8;
  }

  &.hazard-type-3 {
    color: #e6a23c;
    background-color: #fdf6ec;
    border-color: #faecd8;
  }

  &.hazard-type-4 {
    color: #f56c6c;
    background-color: #fef0f0;
    border-color: #fde2e2;
  }

  &.hazard-type-5 {
    color: #909399;
    background-color: #f4f4f5;
    border-color: #e9e9eb;
  }
}
</style>
